import React, { useEffect,useState } from 'react'
import { View, Text, Input, Image, Textarea, ScrollView  } from '@tarojs/components'
import PageWrapper from '@/components/PageWrapper'
import './index.scss';
import Taro from '@tarojs/taro'
import Waterfall, { ImageItem } from '../../../components/Waterfall/Waterfall'
import useNavBarInfo from "@/hook/useNavBarInfo";

const COLUMN_COUNT = 2
// 分类
const Type = ({ data }: { data: any[] }) => {
  return (
    <View className="community-type-box">
      {data.map((item,index)  => (
        <View key={index} className={item.checked !== 1 ? 'community-type-item' : 'community-type-item-checked'}>
          <View className="community-type-title">{item.name}</View>
        </View>
      ))}
    </View>
  );
};
const Page = () => {
  const {
    totalHeightRpx
  } = useNavBarInfo()
  // 图片
  const [columns, setColumns] = useState<ImageItem[][]>(
    Array.from({ length: COLUMN_COUNT }, () => [])
  )
  const [heights, setHeights] = useState<number[]>(Array(COLUMN_COUNT).fill(0))

  const generateMockImages = (): ImageItem[] =>
    new Array(10).fill(0).map((_, i) => {
      const height = 300 + Math.floor(Math.random() * 200)
      return {
        id: Date.now() + i,
        url: `https://picsum.photos/300/${height}?random=${Math.random()}`,
        height,
        name:'用户'+ i,
        goods:'白酒'+ i,
        num:1,
        like:1
      }
    })
  const loadImages = () => {
    const newImages = generateMockImages()
    const newCols = [...columns]
    const newHeights = [...heights]

    newImages.forEach((img) => {
      const minIndex = newHeights.indexOf(Math.min(...newHeights))
      newCols[minIndex].push(img)
      newHeights[minIndex] += img.height
    })

    setColumns(newCols)
    setHeights(newHeights)
  }

  useEffect(() => {
    loadImages()
  }, [])

  const typeList = [
    { name: '关注', index: 0 ,checked: 1},
    { name: '北京', index: 1 ,checked: 0},
    { name: '图文', index: 2 ,checked: 0},
    { name: '视频', index: 3 ,checked: 0},
  ];
  return (
    <PageWrapper title="我的内容" showBack={true} backgroundColor='#F0F0F0'>
      <View className="my-content-page" style={{
        // 动态减去导航栏高度
        height: `calc(100vh - ${totalHeightRpx}rpx)`,
      }}>
        <Type data={typeList}></Type>
        <ScrollView
          scrollY
          className="waterfall-container"
          onScrollToLower={() => {
            Taro.showLoading({ title: '加载中...' })
            setTimeout(() => {
              loadImages()
              Taro.hideLoading()
            }, 1000)
          }}
          lowerThreshold={100}
        >
          <Waterfall columns={columns} />
        </ScrollView>
      </View>
    </PageWrapper>
  )
}

export default Page
